<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vendor/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/bootstarp-3.3.7/css/bootstrap.min.css" />
		<script src="../js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="../js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../assets/layui-v2.4.5/layui/css/layui.css" media="all" />
		<script src="../assets/layui-v2.4.5/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/echarts.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#tabletow {
				margin-top: 10px;
			}
		</style>
		<script>
			$(function() { //, headers: { 'x-requested-with': 'XMLHttpRequest' }]
	
				$.ajaxSetup({
					crossDomain: true,
					xhrFields: {
						withCredentials: true
					}
				});
			});
		</script>

		<script type="text/javascript">
			var qq = [];
			var xx = [];
			var ss = [];
			var aa = [];
			var rows = [];

			$(function() {

				$("#tab").bootstrapTable({
					url: "http://localhost:8090/Findmonth",
					pageSize: 10,
					pagination: true,
					type: "post",
					striped: true,
					columns: [{
							field: 'rq',
							title: '月度',
							align: 'center'

						}, {
							field: 'gs',
							title: '就诊人数',
							align: 'center'
						}, {
							field: 'ssjg',
							title: '实收金额',
							align: 'center'
						}, {
							field: 'xjzf',
							title: '现金支付',
							align: 'center'
						}, {
							field: 'wxzf',
							title: '微信支付',
							align: 'center'
						}, {
							field: 'zfbzf',
							title: '支付宝支付',
							align: 'center'
						}, {
							field: 'ghf',
							title: '挂号费',
							align: 'center'
						}, {
							field: 'cff',
							title: '处方费',
							align: 'center',
							formatter: function(value, row, index) {
								if(row.cff == null || row.cff == '') {
									return '0';
								} else {
									return row.cff;
								}
							}

						}

					],showExport: true, //是否显示导出按钮(此方法是自己写的目的是判断终端是电脑还是手机,电脑则返回true,手机返回falsee,手机不显示按钮)
					exportDataType: "basic", //basic', 'all', 'selected'.
					exportTypes: ['excel', 'xlsx'], //导出类型
					exportButton: $('#vc'), //为按钮btn_export  绑定导出事件  自定义导出按钮(可以不用)
					exportOptions: {
						//ignoreColumn: [0,0],            //忽略某一列的索引  
						fileName: '数据导出', //文件名称设置  
						worksheetName: 'Sheet1', //表格工作区名称  
						tableName: '商品数据表',
						excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
						//onMsoNumberFormat: DoOnMsoNumberFormat  
					}

				})

				$("#nd").click(function() {

					ass();
				})

				$("#ttt").bootstrapTable({
					url: "http://127.0.0.1:8089/queryNdbbtj",
					pageSize: 10,
					pagination: true,
					queryParams: "queryse",
					type: "post",
					columns: [{
							field: 'nrq',
							title: '月份',
							align: 'center'

						}, {
							field: 'ngs',
							title: '就诊人数',
							align: 'center'
						}, {
							field: 'nssjg',
							title: '实收金额',
							align: 'center'
						}, {
							field: 'nzcjg',
							title: '支出金额',
							align: 'center'
						}, {
							field: 'ass',
							title: '所占年度比例',
							align: 'center',
							formatter: function(value, row, index) {
								return row.ass;
							}
						}

					],
					showExport: true, //是否显示导出按钮(此方法是自己写的目的是判断终端是电脑还是手机,电脑则返回true,手机返回falsee,手机不显示按钮)
					exportDataType: "basic", //basic', 'all', 'selected'.
					exportTypes: ['excel', 'xlsx'], //导出类型
					exportButton: $('#vc'), //为按钮btn_export  绑定导出事件  自定义导出按钮(可以不用)
					exportOptions: {
						//ignoreColumn: [0,0],            //忽略某一列的索引  
						fileName: '数据导出', //文件名称设置  
						worksheetName: 'Sheet1', //表格工作区名称  
						tableName: '商品数据表',
						excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
						//onMsoNumberFormat: DoOnMsoNumberFormat  
					}

				})

				$("#cx").click(function() {

					$("#tab").bootstrapTable("refresh");

					queryecharts();
				})

				$("#cxnd").click(function() {

					query();

					$("#ttt").bootstrapTable('append', rows);

				})

				queryecharts();
				query();

			})

			function queryecharts() {

				var mainContainer = document.getElementById('main');
				//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
				var resizeMainContainer = function() {
					mainContainer.style.width = window.innerWidth + 'px';
					mainContainer.style.height = 400 + 'px';
				};
				//设置div容器高宽
				resizeMainContainer();
				// 初始化图表
				var mainChart = echarts.init(mainContainer);
				$(window).on('resize', function() {
					//屏幕大小自适应，重置容器高宽
					resizeMainContainer();
					mainChart.resize();
				});

				$.ajax({
					type: "post",
					url: "http://localhost:8090/Findmonth",
					data: "rqone=" + $("#rqone").val() + "&&rqtow=" + $("#rqtow").val(),
					dataType: "json",
					success: function(data) {

						if(data == '' || data == null) {
							alert("当前指定日期为空!");
							window.location.reload();

						} else {
							qq = [];
							xx = [];
							$.each(data, function(m, n) {
								qq.push(n.rq);
								xx.push(n.ssjg);

							});

							var option = {
								tooltip: {
									trigger: 'axis'
								},
								toolbox: {
									show: true,
									feature: {
										mark: { show: true },
										dataView: { show: true, readOnly: false },
										magicType: { show: true, type: ['line', 'bar'] },
										restore: { show: true },
										saveAsImage: { show: true }
									}
								},
								calculable: true,
								xAxis: [{
									type: 'category',
									boundaryGap: false,
									data: qq
								}],
								yAxis: [{
									type: 'value',
									axisLabel: {
										formatter: '{value}'
									}
								}],
								series: [{
									name: '收入',
									type: 'line',
									data: xx,
									markPoint: {
										data: [
											{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
										]
									}
								}]
							};

							// 为echarts对象加载数据 
							mainChart.setOption(option);

						}

					}

				});

			}

			function query() {

				var mainContainer = document.getElementById('mm');
				//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
				var resizeMainContainer = function() {
					mainContainer.style.width = window.innerWidth + 'px';
					mainContainer.style.height = 400 + 'px';
				};
				//设置div容器高宽
				resizeMainContainer();
				// 初始化图表
				var mainChart = echarts.init(mainContainer);
				$(window).on('resize', function() {
					//屏幕大小自适应，重置容器高宽
					resizeMainContainer();
					mainChart.resize();
				});

				$.ajax({
					type: "post",
					url: "http://localhost:8090/queryNdbbtj",
					data: "rqe=" + $("#rqe").val() + "&&rqer=" + $("#rqer").val(),
					dataType: "json",
					success: function(data) {

						if(data === null || data == '') {
							alert("不可以跨年!");
						} else {
							ss = [];
							aa = [];
							$.each(data, function(m, n) {
								ss.push(n.nrq);
								aa.push(n.nssjg);

							});

							var o = {
								tooltip: {
									trigger: 'axis'
								},
								toolbox: {
									show: true,
									feature: {
										mark: { show: true },
										dataView: { show: true, readOnly: false },
										magicType: { show: true, type: ['line', 'bar'] },
										restore: { show: true },
										saveAsImage: { show: true }
									}
								},
								calculable: true,
								xAxis: [{
									type: 'category',
									boundaryGap: false,
									data: ss
								}],
								yAxis: [{
									type: 'value',
									axisLabel: {
										formatter: '{value}'
									}
								}],
								series: [{
									name: '收入',
									type: 'line',
									data: aa,
									markPoint: {
										data: [
											{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
										]
									}
								}]
							};

							// 为echarts对象加载数据 
							mainChart.setOption(o);

						}

					}

				});

			}

			function queryParams() {
				return {
					'rqone': $("#rqone").val(),
					'rqtow': $("#rqtow").val()
				}

			}

			function queryse() {
				return {
					'rqe': $("#rqe").val(),
					'rqer': $("#rqer").val()
				}

			}

			function ass() {
				if(rows == '') {
					fun();

				} else {}

			}

			function fun() {
				$.ajax({
					type: "post",
					url: "http://localhost:8090/getnbbtj",
					dataType: "json",
					success: function(data) {
						rows = {
							nrq: "合计:",
							ngs: data.sgs,
							nssjg: data.ssjg,
							nzcjg: data.zcjg,
							ass: "8%"
						}
						$("#ttt").bootstrapTable('insertRow', { index: 0, row: rows }); //在表格的第一行新增

					}

				});

			}

			var TableExport = function() {
				"use strict";
				// function to initiate HTML Table Export
				var runTableExportTools = function() {
					$(".export-excel").on("click", function(e) {
						e.preventDefault();
						var exportTable = $(this).data("table");
						var ignoreColumn = $(this).data("ignorecolumn");
						$(exportTable).tableExport({
							type: 'excel',
							escape: 'false',
							ignoreColumn: '[' + ignoreColumn + ']'
						});
					});
				};
				return {
					// main function to initiate template pages
					init: function() {
						runTableExportTools();
						//runDataTable_example2();
					}
				};
			}(jQuery);
		</script>

	</head>

	<body>

		<div>

			<!-- Nav tabs -->
			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active">

					<a href="#home" aria-controls="home" role="tab" data-toggle="tab">月度统计</a>
				</li>
				<li role="presentation">
					<a href="#profile" id="nd" aria-controls="profile" id="nd" role="tab" data-toggle="tab">年度统计</a>
				</li>

			</ul>

			<!-- Tab panes -->
			<div class="tab-content">

				<!-- 月度统计 -->
				<div role="tabpanel" class="tab-pane active" id="home">

					<table width="100%" id="tabletow">

						<tr>
							<td>
								<table>
									<tr>
										<td width="1%">

										</td>
										<td>
											日期&nbsp;:&nbsp;
										</td>
										<td>
											<input class="form-control" type="date" id="rqone" value="" />
										</td>
										<td>
											&nbsp;&nbsp;-&nbsp;&nbsp;
										</td>
										<td>
											<input class="form-control" type="date" id="rqtow" value="" />
										</td>
										<td>
											&nbsp;&nbsp;
										</td>
										<td>
											<input style="width: 80px;" class="btn btn-primary" type="button" id="cx" name="" value="查询" />
										</td>
										<!--<td align="right" width="66.5%"><button style="width: 80px;" type="button" id="exportBtn" style="margin-left:50px" id="export-excel btn_download" class="btn btn-primary" data-table="#tab">导出</button>-->

									</tr>
								</table>
								<br />

								</td>

						</tr>

						<tr>
							<td colspan="2" align="center">
								<h4><b>月度统计</b></h4></td>
						</tr>

					</table>

					<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
					<div id="main" style="height:400px"></div>

					<table id="tab" class="table table-striped"></table>

				</div>

				<!-- 年度统计 -->
				<div role="tabpanel" class="tab-pane" id="profile">

					<table width="100%" id="tabletow">

						<tr>
							<td>
								<table>
									<tr>
										<td width="1%">

										</td>
										<td>
						 					日期&nbsp;:&nbsp;
										</td>
										<td>
											<input class="form-control" type="date" id="rqe" value="" />
										</td>
										<td>
											&nbsp;&nbsp;-&nbsp;&nbsp;
										</td>
										<td>
											<input class="form-control" type="date" id="rqer" value="" />
										</td>
										<td>
											&nbsp;&nbsp;
										</td>
										<td>
											<input style="width: 80px;" class="btn btn-primary" type="button" id="cxnd" name="" value="查询" />
										</td>
										<!--<td align="right" width="66.5%">
											<input style="width: 80px;" type="button" id="" class="btn btn-primary" name="" value="导出" / </td>-->
									</tr>
								</table>
								<br />
								</td>

						</tr>
						
						<tr>
							<td colspan="2" align="center">
								<h4><b>年度统计</b></h4></td>
						</tr>

					</table>

					<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
					<div id="mm" style="height:400px"></div>

					<table id="ttt" class="table table-striped">

					</table>
				</div>
			</div>

		</div>

	</body>

</html>